<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.30考试</title>
    <style>
        li {
            list-style: none;
        }

        .box1 {
            width: 1200px;
            margin: auto;
            text-align: center;
            border: 1px solid black;
        }

        .son1 {
            height: 50px;
            line-height: 50px;
            text-align: center;
            display: flex;
            justify-content: space-evenly;
        }

        .son1 span {
            display: block;
            width: 300px;
            text-align: center;
        }

        .son1 span {
            font-size: 20px;
            color: rgb(233, 53, 53);
        }

        .son2 {
            overflow: hidden;
        }

        .son2 div {
            float: left;
            width: 200px;
        }

        .son2 img {
            width: 180px;
            height: 150px;
        }

        .son2 div p:nth-child(2) {
            font-size: 15px;
        }

        .son2 div p:nth-child(3) {
            color: red;
            font-size: 18px;
        }

        .box2 {
            width: 1200px;
            margin: auto;
            text-align: center;
            overflow: hidden;
            margin-top: 30px;
            border: 1px solid black;
        }

        .selectAdd {
            float: right;
        }

        .box2 div:nth-child(2) {
            overflow: hidden;
        }

        .box2 div:nth-child(2) span {
            float: left;
            font-size: 18px;
            font-weight: bold;
            color: red;
        }

        .thead {
            overflow: hidden;
            width: 1200px;
            height: 45px;
            line-height: 45px;
            background-color: rgb(193, 193, 193);
        }

        .thead li {
            width: 110px;
            float: left;
        }

        .thead li:nth-child(2) {
            margin-right: 480px;
        }

        .tbody {
            margin-bottom: 10px;
        }

        .tbody ul {
            overflow: hidden;
            width: 1200px;
        }

        .tbody li {
            float: left;
        }

        .tbody li:nth-child(2) {
            width: 330px;
            margin-left: 10px;
            margin-right: 340px;
        }

        .tbody img {
            width: 110px;
            height: 100px;
        }

        .tbody li:nth-child(2) span {
            display: inline-block;
            width: 200px;
            position: relative;
            top: -45px;
        }

        .tbody li:nth-child(n+3) {
            width: 110px;
        }

        .delBtn {
            background-color: white;
            border: none;
            font-size: 20px;
            float: left;
        }

        .son3 {
            float: right;
        }

        .son3 span {
            font-size: 18px;
        }

        .son3 span span {
            font-size: 25px;
            color: red;
            font-weight: bold;
        }

        .son3 button {
            width: 80px;
            height: 40px;
            margin: 0 10px 10px 10px;
            background-color: red;
            font-size: 20px;
            font-weight: bold;
            color: white;
            border: none;

        }
    </style>
</head>

<body>
    <div class="box1">
        <h1>热销爆款</h1>
        <div class="son1">
            <span>空调</span>
            <span>平板电视</span>
            <span>生活电器</span>
            <span>洗衣机</span>
            <span>冰箱</span>
            <span>厨房大电</span>
        </div>
        <div class="son2">

        </div>
    </div>

    <div class="box2">
        <h1>购物车</h1>
        <div>
            <span>全部商品</span>
            <div class="selectAdd">
                <span>配送至：</span>
                <select>
                    <option value="">河南省郑州市登封市白坪乡</option>
                </select>
            </div>
        </div>

        <ul class="thead">
            <li><input type="checkbox" class="check_btn">全选</li>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>操作</li>
        </ul>

        <div class="tbody">
        </div>
        <button class="delBtn">删除选中的商品</button>
        <div class="son3">
            <span>总价：<span></span></span>
            <button>结算</button>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 数据
        var Goods_list = [
            {
                id: 1,
                img: "http://img.alicdn.com/img/i4/6115298394/O1CN01Tz14lZ2BsVdRJ7DUp_!!4611686018427382874-0-saturn_solar.jpg_360x360q90.jpg_.webp",
                description: '小米巨省电空调挂机冷暖两用1.5匹一级能效变频...',
                price: 3000
            },
            {
                id: 2,
                img: 'https://img.alicdn.com/imgextra/i2/1035757927/O1CN01dlOzTy28QcfA84sS9_!!1035757927-2-alimamacc.png_360x360q90.jpg_.webp',
                description: '奥克斯空调省电侠挂机大1匹一级能效卧室家用空...',
                price: 4000
            },
            {
                id: 3,
                img: 'http://img.alicdn.com/img/i3/13092455/O1CN01wwnhov1U0ROyKvV29_!!4611686018427381351-2-saturn_solar.png_360x360q90.jpg_.webp',
                description: '美的空调官方正品酷省电Pro一级能效家用大1.5...',
                price: 5000
            },
            {
                id: 4,
                img: 'http://img.alicdn.com/img/i3/44096902/O1CN01gME12o20rAhjYiKAN_!!4611686018427387270-2-saturn_solar.png_360x360q90.jpg_.webp',
                description: '小米米家空调2匹新一级能效睡眠款变频智能控...',
                price: 2000
            },
            {
                id: 5,
                img: 'http://img.alicdn.com/img/i3/3079263591/O1CN01kRgw0C1cOjKLmfMaN_!!3079263591-0-alimamacc.jpg_360x360q90.jpg_.webp',
                description: '【李佳琦助播模特的自购清单】奥克斯空调...',
                price: 4000
            },
            {
                id: 6,
                img: 'http://img.alicdn.com/img/i3/3079263591/O1CN01icrzAC1cOjKQKAlza_!!3079263591-0-alimamacc.jpg_360x360q90.jpg_.webp',
                description: 'Gree/格力官方一级能效变频冷暖正1.5匹...',
                price: 6000
            },
            {
                id: 7,
                img: 'http://img.alicdn.com/img/i3/18307420/O1CN01LeMSRB24gPrswyDJb_!!4611686018427386204-0-saturn_solar.jpg_360x360q90.jpg_.webp',
                description: '海尔小红花空调净省电官方正品一级能效家...',
                price: 8000
            },
            {
                id: 8,
                img: 'http://img.alicdn.com/img/i2/7442795243/O1CN01RGfqJL1obLd3J8Bs7_!!4611686018427382507-0-saturn_solar.jpg_360x360q90.jpg_.webp',
                description: '华凌空调神机二代大1.5匹挂机新一级能效...',
                price: 3000
            }
        ]


        // 购物车数据
        var car_list = []

        // 物品数据渲染
        function data() {
            $('.son2').html('')
            Goods_list.forEach(item => {
                $('.son2').append(`
                <div onclick="addGoods(${item.id})">
                    <img src="${item.img}" alt="">
                    <p>${item.description}</p>
                    <p>￥${item.price}</p>
                </div>`)
            });
        }
        data()


        // 购物车数据渲染
        function carGoods() {
            $('.tbody').html('')
            car_list.forEach(item => {
                $('.tbody').append(`
                <ul>
                    <li><input type="checkbox" ${item.status ? 'checked' : ""} onclick="checkipt(${item.id})"></li>
                    <li>
                        <img src="${item.img}" alt="">
                        <span>${item.description}</span>
                    </li>
                    <li>￥${item.price}</li>
                    <li>
                        <button onclick="minus(${item.id})">-</button>
                        <span>${item.num}</span>
                        <button onclick="plus(${item.id})">+</button>
                    </li>
                    <li>
                        <button onclick="delGoods(${item.id})">删除</button>
                    </li>
                </ul>
                `)
            })
        }


        // 点击添加购物车
        function addGoods(id) {
            var add = Goods_list.find(item => item.id == id)
            var exist = car_list.find(item => item.id == add.id)
            if (exist) {
                exist.num++
                carGoods()
            } else {
                car_list.push({
                    id: add.id,
                    img: add.img,
                    description: add.description,
                    price: add.price,
                    num: 1,
                    status: false,
                })
                carGoods()
            }
        }

        // 数量+1
        function plus(id) {
            var plusGoods = car_list.find(item => item.id == id)
            plusGoods.num++
            carGoods()
            total()
        }
        // 数量-1
        function minus(id) {
            var minusGoods = car_list.find(item => item.id == id)
            if (minusGoods.num > 1) {
                minusGoods.num--
            }
            carGoods()
            total()
        }


        // 删除单个
        function delGoods(id) {
            var delIndex = car_list.findIndex(item => item.id == id)
            car_list.splice(delIndex, 1)
            carGoods()
            total()
        }


        // 全选反选
        $('.check_btn').click(function () {
            var isChecked = $(this).prop('checked')
            car_list.forEach(item => item.status = isChecked)
            carGoods()
            total()
        })

        // 单个单选框的勾选
        function checkipt(id) {
            var choice = car_list.find(item => item.id == id)
            choice.status = event.target.checked

            var flag = car_list.every(item => item.status == true)
            if (flag) {
                $('.check_btn').prop('checked', true)
            } else {
                $('.check_btn').prop('checked', false)
            }


            total()
        }


        // 结算
        function total() {
        var totalPrice = 0
            car_list.forEach(item => {
                if (item.status) {
                    totalPrice += item.price * item.num
                }
            })
            $('.son3 span span').html(`￥${totalPrice}`)
            carGoods()

        }


        // 删除选中的商品
        $('.delBtn').click(() => {
            car_list.forEach(item => {
                if (item.status) {

                }
            })
        })
    </script>
</body>

</html>